<template>
	<view class="card" @click.stop="goPage">
		<view class="card--header flex justify-between">
			<view class="order-sn">订单编号：{{ orderInfo.sn }}</view>
		</view>

		<view class="card--main flex">
			<u-image :src="orderInfo.orderGoodsDetailVo.imageUrl" width="160" height="160"></u-image>
			<view class="ml-[20rpx] service-text">
				<view class="service-text--name truncate">{{
                    orderInfo.orderGoodsDetailVo.goodsName
                }}</view>
				<view class="service-text--name truncate" style="margin-top: 10px;">状态：{{
				    orderInfo.orderStatusName
				}}</view>
				
				
				<!-- <view class="service-text--name truncate">
					已服务：{{
				    orderInfo.orderGoodsDetailVo.goodsName
				}}</view>
				<view class="service-text--name truncate">
					已预约：{{
				    orderInfo.orderGoodsDetailVo.goodsName
				}}</view>
				<view class="service-text--name truncate">
					可预约：{{
				    orderInfo.orderGoodsDetailVo.goodsName
				}}</view> -->
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {apiServiceConfirmService} from "@/api/time";
	const props = withDefaults(
		defineProps<{
			orderInfo ?: any // 底部
		}>(),
		{
			orderInfo: {}
		}
	)

	const goPage = () => {

		uni.navigateTo({
			url: `/pages/serviceAppointment/components/serviceCalendar?id=${props.orderInfo.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.card {
		border-radius: 14rpx;
		background-color: #ffffff;
		margin: 20rpx 20rpx 0 20rpx;

		&--header {
			padding: 24rpx 30rpx;
			font-size: 26rpx;
			border-bottom: 1px solid #e5e5e5;

			.order-sn {
				color: #222222;
			}

			.status {
				color: #f36161;
			}
		}

		&--main {
			padding: 30rpx;
			color: #555555;
			font-size: 26rpx;

			.service-text {
				&--name {
					width: 460rpx;
					font-weight: 500;
					color: #222222;
					font-size: 32rpx;
				}
			}
		}

		&--footer {
			padding: 20rpx 30rpx;
			font-size: 26rpx;
			border-top: 1px solid #e5e5e5;
		}
	}
</style>